<template>
<div id="cloth_select">    
     <div class="footerFooter swiper-container" >
        <div class="swiper-wrapper" id="swiper-wrapper">
          <ul v-for="(value,index) in show_heng" style="height:100%;float:left" class="swiper-slide">
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.one.img_thumb_url" style="width:100%;display:block" :img_src="value.one.img_url" :img_id="value.one.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.two.img_thumb_url" style="width:100%;display:block" :img_src="value.two.img_url" :img_id="value.two.img_id" v-on:click='selected($event)'/>
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.three.img_thumb_url" style="width:100%;display:block" :img_src="value.three.img_url" :img_id="value.three.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.four.img_thumb_url" style="width:100%;display:block" :img_src="value.four.img_url" :img_id="value.four.img_id" v-on:click='selected($event)'/>
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.five.img_thumb_url" style="width:100%;display:block" :img_src="value.five.img_url" :img_id="value.five.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.six.img_thumb_url" style="width:100%;display:block" :img_src="value.six.img_url" :img_id="value.six.img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
           <ul v-for="(value,index) in show_zhong1" style="height:100%;float:left" class="swiper-slide">
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.one.img_thumb_url" style="width:100%;display:block" :img_src="value.one.img_url" :img_id="value.one.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.two.img_thumb_url" style="width:100%;display:block" :img_src="value.two.img_url" :img_id="value.two.img_id" v-on:click='selected($event)'/>
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.three.img_thumb_url" style="width:100%;display:block" :img_src="value.three.img_url" :img_id="value.three.img_id" v-on:click='selected($event)'/>
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.four.img_thumb_url" style="width:100%;display:block" :img_src="value.four.img_url" :img_id="value.four.img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
          <ul v-for="(value,index) in show_zhong2" style="height:100%;float:left" class="swiper-slide">
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.one.img_thumb_url" style="width:100%;display:block" :img_src="value.one.img_url" :img_id="value.one.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.two.img_thumb_url" style="width:100%;display:block" :img_src="value.two.img_url" :img_id="value.two.img_id" v-on:click='selected($event)' />
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.three.img_thumb_url" style="width:100%;display:block" :img_src="value.three.img_url" :img_id="value.three.img_id" v-on:click='selected($event)'/>
                 <img class="item-pic" v-lazy="value.four.img_thumb_url" style="width:100%;display:block" :img_src="value.four.img_url" :img_id="value.four.img_id" v-on:click='selected($event)'/>
             </li>
             <li style="width:33.1%;height:200px;float:left">
                 <img class="item-pic" v-lazy="value.five.img_thumb_url" style="width:100%;display:block" :img_src="value.five.img_url" :img_id="value.five.img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
          <ul v-for="(value,index) in show_shu" style="height:100%;float:left" class="swiper-slide">
             <li>
               <img class="item-pic" v-lazy="value.one[0].img_thumb_url" style="width:100%;display:block" :img_src="value.one[0].img_url" :img_id="value.one[0].img_id" v-on:click='selected($event)'/>
             </li>
             <li>
               <img class="item-pic" v-lazy="value.two[0].img_thumb_url" style="width:100%;display:block" :img_src="value.two[0].img_url" :img_id="value.two[0].img_id"v-on:click='selected($event)'/>
             </li>
             <li>
               <img class="item-pic" v-lazy="value.three[0].img_thumb_url" style="width:100%;display:block" :img_src="value.three[0].img_url" :img_id="value.three[0].img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
          <ul v-for="(value,index) in show_shu_zhong1" style="height:100%;float:left" class="swiper-slide">
             <li>
               <img class="item-pic" v-lazy="value.one[0].img_thumb_url" style="width:100%;display:block" :img_src="value.one[0].img_url" :img_id="value.one[0].img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
          <ul v-for="(value,index) in show_shu_zhong2" style="height:100%;float:left" class="swiper-slide">
             <li>
               <img class="item-pic" v-lazy="value.one[0].img_thumb_url" style="width:100%;display:block" :img_src="value.one[0].img_url" :img_id="value.one[0].img_id" v-on:click='selected($event)'/>
             </li>
             <li>
               <img class="item-pic" v-lazy="value.two[0].img_thumb_url" style="width:100%;display:block" :img_src="value.two[0].img_url" :img_id="value.two[0].img_id" v-on:click='selected($event)'/>
             </li>
          </ul>
        </div>
     </div>
</div>
</template>
<script>
import Swiper from 'swiper';
export default {
  name: 'cloth_select',
  data () {
    return {
      swiper:"",
     img:{
      level:'',
      message:'',
      data:{
        heng:'',
        shu:'',
      }
     },
     show_heng:[],
     show_shu:[],
     show_zhong1:[],
     show_zhong2:[],
     show_shu_zhong1:[],
     show_shu_zhong2:[],  
    }
  },
  watch:{
    type:function(value){
      this.$options.methods.getImgInfo.bind(this)(value)
    }  
  },
  beforeCreate(){
    this.bus.$emit('loading', true);    //把加载层开启
  },
  computed:{
    type(){
      return this.$store.state.type;
    }
  },
  mounted(){
     var _this=this
     var type='zh' 
     _this.$options.methods.getImgInfo.bind(this)(type);   //这里加个bind是当vue这个对象的this传过去
  },
  methods:{
    selected:function(ev){
       var imgSrc=[];
       imgSrc.push(ev.target.getAttribute('img_id'));
       imgSrc.push(ev.target.getAttribute('img_src'));
       this.$store.dispatch('setImg',imgSrc);
    },
     getImgInfo(type){      //获取数据并且把数据整理
        this.bus.$emit('loading', true);
        var _this=this;
        _this.show_heng.splice(0,_this.show_heng.length);
        _this.show_shu.splice(0,_this.show_shu.length);
        _this.show_zhong1.splice(0,_this.show_zhong1.length);
        _this.show_zhong2.splice(0,_this.show_zhong2.length);
        _this.show_shu_zhong1.splice(0,_this.show_shu_zhong1.length);
        _this.show_shu_zhong2.splice(0,_this.show_shu_zhong2.length);
        this.$http.get('http://zoomyoung.cn/api/design/get-material',{params:{type:type}}).then(function(res){   
        _this.img.data.heng=res.data.data.heng;
        _this.img.data.shu=res.data.data.shu;
        _this.img.level=res.data.level;
        _this.img.message=res.data.message;
        var a=Math.floor(_this.img.data.heng.length/6);
        for(var i=0;i<a;i++)
        {
         _this.show_heng.push({"one":_this.img.data.heng[0],"two":_this.img.data.heng[1],"three":_this.img.data.heng[2],"four":_this.img.data.heng[3],"five":_this.img.data.heng[4],"six":_this.img.data.heng[5]});
          _this.img.data.heng.shift();_this.img.data.heng.shift();_this.img.data.heng.shift();_this.img.data.heng.shift();_this.img.data.heng.shift();_this.img.data.heng.shift();
        }
        if(_this.img.data.heng.length>0)
        {
          if(_this.img.data.heng.length==2)
            {
               _this.show_zhong1.push({"one":_this.img.data.heng[0],"two":_this.img.data.heng[1],"three":_this.img.data.shu[0],"four":_this.img.data.shu[1]})
               _this.img.data.shu.shift();
               _this.img.data.shu.shift();
            }else{
              _this.show_zhong2.push({"one":_this.img.data.heng[0],"two":_this.img.data.heng[1],"three":_this.img.data.heng[2],"four":_this.img.data.heng[3],'five':_this.img.data.shu[0]})
               _this.img.data.shu.shift();
            }
        }
        var b=Math.floor(_this.img.data.shu.length/3);
        for(var j=0;j<b;j++)
        {
         _this.show_shu.push({"one":[_this.img.data.shu[0]],"two":[_this.img.data.shu[1]],"three":[_this.img.data.shu[2]]})
         _this.img.data.shu.shift();
         _this.img.data.shu.shift();
         _this.img.data.shu.shift();
        }
        if( _this.img.data.shu.length>0)
        {
          if( _this.img.data.shu.length==1)
            {
              _this.show_shu_zhong1.push({"one":[_this.img.data.shu[0]]})
            }else{
              _this.show_shu_zhong2.push({"one":[_this.img.data.shu[0]],"two":[_this.img.data.shu[1]]})
            }
        }
        _this.$nextTick(function(){
        _this.swiper=new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: false,
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
        observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        initialSlide:0,
        on:{
          init:function(){
            setTimeout(function(){
              alert('aa')
              _this.swiper.setTransition(0)
            },1000)
          }
        }
        });
        _this.bus.$emit('loading', false);
        })
      }).catch(function(err){  
          console.log(err)  
      }) 
     },
  }
}
</script>


<style scoped>
     #cloth_select{width: 100%;height: 400px;position: fixed;left: 0;bottom: 0;}
     .footerFooter{width: auto;height: 100%;background: #595A63;}
     .swiper-wrapper{width: 50000px;height: 100%;white-space: nowrap;}
     .swiper-slide{width: auto;height: 100%;}
     .swiper-slide ul{width: 375px;height:100%;}
     .swiper-slide li{width: 33.1%;height:400px;float: left; }
     
</style>